<template>
  <div class="facility">
    <div class="title">选择区域</div>
    <!-- 树状列表组件 -->
    <div class="facilityTreeContent">
      <div class="facilityTree" v-for="item, index in treedata" :key="index">
        <div class="facilityGroupName" :class="facilityGroupNo == item.facilityGroupNo ? 'activeFacility' : ''"
          @click="handleSelectionChange(item,index)">
          <div>{{ item.facilityName }}</div>
          <div class="el-icon" @click.stop="caret(index)" title="展开/收起">
            <i v-show="facilityGroupIndexList.includes(index)" class="el-icon-caret-bottom"></i>
            <i v-show="!facilityGroupIndexList.includes(index)" class="el-icon-caret-top"></i>
          </div>
        </div>
        <div class="facilityList" :style="{
          height: facilityGroupIndexList.includes(index) ? `${item.facilityList.length * 36}px` : 0
        }">
          <div class="facilityName" :class="facilityNo == item_c.facilityNo ? 'activeFacility' : ''"
            @click="handleSelectionChange(item_c)" v-for="item_c, index_c in item.facilityList" :key="index_c">
            {{ item_c.facilityName }}</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import facility from '@/api/facility';
export default {
  props: {
    queryType: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data() {
    return {
      treePropstype: {
        children: 'facilityList',
        label: 'facilityName'
      },
      treedata: [],
      facilityGroupList: [],
      facilityList: [],
      treeList: [],
      facilityNo: '',
      facilityGroupNo: '',
      facilityGroupIndexList: [0]
    }
  },
  mounted() {
    this.gettreelist()
  },
  methods: {
    caret(index) {
      if (this.facilityGroupIndexList.includes(index)) {
        this.facilityGroupIndexList = this.facilityGroupIndexList.filter(e => e != index)
      } else {
        this.facilityGroupIndexList.push(index);
      }
    },
    handleSelectionChange(e,index) {
      this.facilityNo = e.facilityNo + '';
      this.facilityGroupNo = e.facilityGroupNo + '';
      this.caret(index)
      this.$emit("selectValue", e);
    },
    // 获取树状数据
    async gettreelist() {
      facility.queryFGByFtNo({ ...this.queryType }).then(res => {
        let data = res.data
        this.facilityGroupList = data.facilityGroupList.map(item => {
          return { ...item, isGroup: true };
        })
        this.facilityList = data.facilityList.filter(item => {
          return item.breedType == sessionStorage.breedType
        })
        if (this.facilityGroupList.length > 0) {
          this.treeList = [this.facilityGroupList[0].facilityGroupId]
        } else if (this.facilityList.length) {
          this.treeList = [this.facilityList[0].facilityId]
        } else {
          this.treeList = []
        }
        this.changetreedata()
      }).catch(err => {
        console.log(err)
      })

    },
    // 处理树状数据
    changetreedata() {
      let nothasgroup = []
      if (this.facilityList.length > 0) {
        nothasgroup = [{
          isGroup: true,
          facilityName: "未分组地块",
          facilityId: this.facilityList[0].facilityId,
          facilityList: this.facilityList
        }]
      } else {
        nothasgroup = []
      }
      let hasgrouplist = this.facilityGroupList.filter(
        item => {
          this.$set(item, 'facilityName', item.facilityGroupName)
          this.$set(item, 'facilityId', item.facilityGroupId)
          let groupitem = {
            ...item
          }
          if (item.breedType == sessionStorage.breedType) {
            return groupitem
          } else {
            return false;
          }
        }
      )
      this.treedata = [
        ...hasgrouplist,
        ...nothasgroup
      ]
      this.$nextTick(() => {
        if (this.treedata.length > 0) {
          this.handleSelectionChange(this.treedata[0].facilityList[0])
        } else {
          this.handleSelectionChange(this.treedata[0])
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.facility {
  width: 100%;
  height: 100%;
  padding: 15px;
  box-sizing: border-box;

  .title {
    text-align: center;
    line-height: 50px;
    font-size: 14px;
    font-weight: bold;
    color: #00365D;
  }

  .facilityTreeContent {
    width: 100%;
    height: calc(100% - 50px);
    border: 1px solid #B8BCC3;
    background-color: #ffffff;
    overflow: auto;
    position: relative;

    &::-webkit-scrollbar {
      display: none;
    }

    .facilityTree {
      width: 100%;
      font-size: 16px;
      text-align: center;
      line-height: 34px;
      cursor: pointer;

      .facilityList {
        width: 100%;
        overflow: hidden;
        transition: all 0.3s;
        border-bottom: 1px solid #B8BCC3;
      }

      .facilityGroupName {
        background-color: #EBEFFF;
        transition: all 0.3s;
        position: relative;

        .el-icon {
          position: absolute;
          top: 50%;
          right: 5px;
          transform: translateY(-50%);
          color: #7E9AB5;
        }
      }

      .facilityName {
        background-color: #ffffff;
        transition: all 0.3s;
      }

      .facilityGroupName,
      .facilityName {
        height: 36px;
        border: 1px solid #B8BCC3;
        border-bottom: none;
        box-sizing: border-box;

        &:hover {
          background-color: #EBEFFF;
          color: #6176D0;

          .el-icon {
            color: #6176D0;
          }
        }
      }

      .activeFacility {
        background-color: #6176D0;
        color: #ffffff;

        .el-icon {
          color: #ffffff;
        }
      }
    }
  }

}
</style>